<template>
  <section>
    <Table border :columns="columns1" :data="orderList"></Table>
    <div style="overflow: hidden; position:absolute;bottom:20px;right:40px;">
      <div>
        <Page :total="total"
        :current.sync="page"
        :page-size="pageSize"
        show-total
        no-data-text="暂时没有订单"
        @on-change="changePage"></Page>
      </div>
    </div>
  </section>
</template>
<script>
import { getAllOrderList, getOrderData, selectOrderList } from '../../api/api';
export default {
  name: "OrderList",
  data() {
    return {
      columns1: [
        {
          title: "订单id",
          key: "id",
        },
        {
          title: "用户",
          key: "user_id",
        },
        {
          title: "车辆ID",
          key: "car_id",
        },
        {
          title: '用户租车状态',
          key: 'orderStatus'
        },
        {
          title: "开始租车时间",
          key: "startTime",
        },
        {
          title: "结束租车时间",
          key: "endTime",
        },
        {
          title: "总金额",
          key: "totalMoney",
        }
      ],
      orderList: [
        {
          id: "John Brown",
          user_id: 18,
          car_id: "New York No. 1 Lake Park",
          orderStatus: "2016-10-03",
          startTime: "",
          endTime: "",
          totalMoney: ""
        }
      ],
      total: 0,
      page: 1,
      pageSize: 1
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getAllOrderList().then(res => {
        this.total = res.data.data.length;
        selectOrderList(this.page, this.pageSize).then(res => {
          this.orderList = res.data.data;
          // getOrderData().then(res => {
          //   console.log('后台页面上连表查询成功', res);
          // })
        })
      })
    },
    changePage(e) {
      this.page = e;
      this.getData();
    }
  }
};
</script>